<template>
  <div id="companyDetails" class="person-detail">
    <div>
      <van-nav-bar title="公司详情" :fixed="true" left-arrow @click-left="back" />
    </div>
    <div>
      <div class="jobDetails-training-company">
        <div class="employmentTraining-training-job">
          <p class="employmentTraining-training-jobName" style="font-size:18px;">
            {{ company.companyName }}
          </p>
          <p class="employmentTraining-training-nature">
            <span class="">{{company.categoryName}}
              | {{ company.scaleName }}</span>
          </p>
          <p class=" shadow-span">
            <span>{{ company.industryTypeName }}</span>
          </p>
        </div>
        <div class="jobDetails-arrow">
          <van-image round width="5em" height="5em" :src="company.headImage" />
        </div>
      </div>
      <div class="companyDetails-training-company">
        <div class="employmentTraining-training-job">
          <p class="employmentTraining-training-jobName" style="font-size:18px;">
            公司介绍
          </p>
          <div class="jobDetails-details">
            <p class="mar-p">
              <span class="employmentTraining-training-jobName">公司简介</span>
            </p>
            <div class="jobDetails-training-address">
              <p>{{ company.description }}</p>
            </div>
            <p class="mar-p">
              <span class="employmentTraining-training-jobName ">公司地址</span>
            </p>
            <div class="jobDetails-training-address">
              <p>{{ company.address }}</p>
            </div>
            <p class="mar-p">
              <span class="employmentTraining-training-jobName">公司官网</span>
            </p>
            <div class="jobDetails-training-address">
              <p>{{ company.officialSite }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import mine from "../../../../controller/mine";
  export default {
    name: "companyDetails",
    components: {},
    data() {
      return {
        company: {
          name: "北京中电兴发科技有限公司",
          people: "22-90人",
          nature: "民营",
          category: "互联网电子商务",
          address: "北京市海淀区中关村南大街52号",
          introduce: "北京中电兴发科技有限公司始创于1997年10月，是在原电子工业部下属的中国电子器材总公司工程公司基础上改制设立的，注册资本5001万元，是中国IT/SI行业唯一具有七个甲级资质的国家级高新技术企业，是北京市软件和信息服务业“四个一批”工程首批入选企业，是中关村国家自主创新示范区“十百千工程”企业，是中关村科技园区重点扶持的拟上市企业。",
          url: "http://www.sinonet.net.cn"
        }
      };
    },
    computed: {},
    created() {},
    mounted() {
      this.getInfo();
    },
    methods: {
      getInfo() {
        let data = this.$route.query.id;
        mine.training_company(data).then(res => {
          this.isLoading = false;
          if (res.code == "0") {
            if (res.datas != null) {
              this.company = res.datas;
            }
          } else {
            this.$toast(res.msg);
          }
        });
      },
      back() {
        this.$router.go(-1);
      }
    }
  };
</script>
<style lang="scss" scoped>
  #companyDetails {
    background: #fff;

    .jobDetails-training-company {
      margin: 20px;
      display: flex;
      box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.08);
      padding: 20px;
    }

    .companyDetails-training-company {
      padding: 10px 20px;
    }

    .employmentTraining-training-job {
      width: 70%;

      >p:nth-child(1) {
        padding-bottom: 20px;
      }
    }

    .employmentTraining-training-nature {
      margin-top: 10px;
    }

    .employmentTraining-training-jobName {
      font-size: 16px;
      font-weight: bold;
    }

    .jobDetails-arrow {
      float: right;
      padding: 10px 0 5px 5px;
    }

    .employmentTraining-training-address {
      >span {
        background: #ccc;
        margin-left: 10px;
        padding: 3px;
        border-radius: 3px;
      }

      >span:nth-child(1) {
        margin-left: 0;
      }
    }

    .shadow-span {
      margin-top: 10px;

      >span {
        background: #f5f5f5;
        margin-left: 10px;
        padding: 5px;
        border-radius: 1px;
        color: #888888;
      }

      >span:nth-child(1) {
        margin-left: 0;
      }
    }

    .mar-p {
      margin: 10px 0;
    }

    .jobDetails-training-address {
      >p {
        opacity: 0.5;
      }
    }
  }
</style>